<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>上传图片</title>
    <script src="js/jquery-3.3.1.js"></script>

    <script>                              <!--向后端传数据-->


    $(function ()
    {


        $("#upload").click(function ()
        {
            $.ajax({
                async:false,
                type:"post",
                url:"Houduanshujuku",
                data:{
                    picname: $("#picname").val(),
                    picauthor:$("#picauthor").val(),
                    picintroduction:$("#picintroduction").val(),
                    pictag:$("#pictag").val(),
                    picsource:$("#picsource").val()
                },
                success:function (data) {
                    if(data.picname && data.picauthor && data.picintroduction && data.pictag && data.picsource)
                    {
                        alert('上传成功');
                    }
                },
            });
        });
    });



    $(function(){
        $("#getinf").click(function () {
            $.get("getPicInf",function (data) {
                for(var i=0;i<data.length;i++)
                {
                    var str=data[i].picname;
                    alert(str);

                }
            });
        });
    });

    </script>

</head>
<style>                   <!--网页布局-->
body{
    margin: 0;
}
.box{
    width: 1200px;
    margin: 0 auto;
}
.main{
    height: 800px;
    position: relative;
}
.main .left{
    width: 50%;
    height: 800px;
    position: absolute;
    left: 0;
    top: -16px;
    background-color: #ddd;
}
.main .right{
    width: 50%;
    height:800px;
    position: absolute;
    right: 0;
    top: -16px;

}
.footer{
    width: 1200px;
    height: 80px;
}
li{
    width: 100%;
    height: 100%;
}

</style>

<body>
<div class="box">

    <div class="main">
        <p class="left">                                                        <!--上传图片按钮-->
                <input type="file" id="scwj" value="此处显示图片">
                <button onclick="xztp()">上传图片</button>
                <img src="" id="img" alt="暂无" width="100%" height="97%" />
            <script>
                //先把图片上传显示出来
                var filename = document.getElementById("scwj");
                var img = document.getElementById("img");
                filename.onchange = function () {
                    img.src = URL.createObjectURL(this.files[0]);
                };
                //加一个a标签，获取图片的流，点download下载就好了
             /*   function xztp() {
                    var bqa = document.createElement("a");
                    console.log(bqa);
                    bqa.setAttribute("href", URL.createObjectURL(filename.files[0]));
                    bqa.setAttribute("download", filename.name);
                    bqa.click();
                }*/
            </script>
        </p>

        <p class="right">                <!--右侧·一系列数据-->
            <input type="text" name="picname" id="picname" style="width: 600px;height: 60px;text-align: center" value="请输入图片名称">                           <!--输入标题-->
            <input type="text" name="picauthor" id="picauthor" style="width: 600px;height: 20%;text-align: center" value="请输入作者">   <!--显示用户信息-->
            <textarea name="picintroduction" id="picintroduction" style="width: 600px;height: 60%;text-align: left">请输入图片介绍</textarea>            <!--输入简介-->
            <input type="text" style="width: 600px;height: 40px;text-align: center;border: 0px" value="请输入标签（以英文逗号分隔）：" disabled>    <!--提示输入标签-->
            <input type="text" name="pictag" id="pictag" style="width: 600px;height: 33px;text-align: center">                             <!--输入标签-->
        </p>
    </div>

    <div class="footer"><!--最下面资源和上传按钮部分-->

                    <input type="text" name="picsource" id="picsource" style="width: 70%;height: 40px;text-align: left" value="请输入图片来源">
                    <button type="button" name="upload" id="upload" style="width: 20% ;height: 40px;text-align: center;background-color: blue;color: #dddddd" onclick="function clickend() {

                        alert('上传成功');

                    }">上传</button>
      <!--  <button type="button" id="getinf" style="width: 10%;height: 40px">获取后端数据</button>-->
    </div>

</div>
</body>
</html>